<template>
    <!--渠道管理 width="100%"-->
    <div id='ChannelManagement' name="ChannelManagement">
        <el-card class="box-card">
        <ul class="CMnav">
            <li>
                <span class="mr">时间:</span>
                 <el-date-picker
                  v-model="value6"
                  type="daterange"
                  range-separator="至"
                  @change="timechange"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
            </li>
             <li>
                 <el-select v-model="id"  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.channelCode"
                      :value="item.id">
                    </el-option>
                </el-select>
            </li>
            <li>
                <el-button class="btn1" type="primary" @click="search" size="small">查询</el-button>
            </li>
            
        </ul>
        </el-card>
       <el-card class="box-card mt">

            <el-card class="box-card rl-card-w">
              <loading v-if="searloading"></loading>
                 <el-table
                    v-else="searloading"
                    :data="tableData"
                    border
                    stripe
                    :reserve-selection="true"
                    style="width: 100%">
                    <el-table-column
                      label="日期"
                      prop="date_time"
                      align="center"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="cs"
                      label="注册数"
                      align="center"
                      >
                    </el-table-column>
                 
                    
                </el-table>
                 <div class="block">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="currentPage3"
                      :page-size="pageSize"
                       background
                      layout="prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </div>
            </el-card>
            
       </el-card>
        
       
      

      
    </div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
import {  option2 , option3} from "../echarts/option.js"
import { channelRealtime  } from '../api/api'
import modal from '../components/Modal.vue'
import confirm from '../components/Confirm.vue'
import  { mapGetters, mapActions }  from 'vuex'
import loading from '../components/Loading.vue'
import moment from 'moment'
export default{
    data(){
        return{
           input10:"",
           input11:"",
           pageSize:10,
           tableData:[],
           currentPage3:1,
           value6:"",
          options: [{
            id:null,
            channelCode:"汇总"
          }],
          id: null,
          channelCode:null,
          startTime:"",
          endTime:"",
          searloading:false,
          total:1,
          TimeStr:null,
        }
    },
    components:{
        modal,
        loading,
    },
    mounted(){
        
    },
    methods:{
        ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
        dateFormat1:function(row, column) { 
          var date = row[column.property]; 
           if (date == undefined) { 
             return "--"; 
           } 
           return moment(date).format("YYYY-MM-DD"); 
        }, 
        search(){
            console.log(this.startTime)
            console.log(this.endTime)
            console.log(this.value4)
            if((new Date().getTime())-this.TimeStr>2000){
              this.currentPage3=1;
              for (var i = 0; i < this.options.length; i++) {
                console.log(this.options[i].id)
                    if(this.id==this.options[i].id){
                        this.channelCode=this.options[i].channelCode
                        if(this.channelCode=="汇总"){
                            this.channelCode=null;
                        }
                    }
              }
              this.init();
              
            }
        },
        timechange(val){
            //console.log(val)
            if(val){
                this.startTime=val[0];
                this.endTime=val[1];
            }else{
                this.startTime="";
                this.endTime="";
            }
        },
        handleSizeChange(val){
            console.log(`每页 ${val} 条`);
            this.init();
        },
        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
            this.currentPage3=val
            this.init();
        },
        init(){
          var msg={
            startTime:this.startTime,
            endTime:this.endTime,
            channelCode:this.channelCode,
            pageIndex:this.currentPage3,
            pageSize:this.pageSize,
          }
            channelRealtime.channelRealtimeDataList(msg)
            .then((result)=>{
              console.log(result)
                   let arr=[];
                   result=result.page;
                   this.tableData=result.list
                   for (var i = 0; i < this.tableData.length; i++) {
                      arr.push(this.tableData[i].columns)
                   }
                   this.tableData=arr
                   //console.log(this.tableData);
                   this.total=result.totalRow;
                   this.TimeStr=new Date().getTime();
                }).catch(function(error){
                    console.error(error)
                })
        },
        initChannelNumber(){
          channelRealtime.channelNumberDOList()
            .then((result)=>{
                   //console.log(result)
                   this.options=result;
                   this.options.unshift({
            id:null,
            channelCode:"汇总"
          })
                }).catch(function(error){
                    console.error(error)
                })
        },
        handleClick(){

        },
        saveUser(){

        },
        saveUserNum(){

        },

    },
    created(){
        this.init();
        this.initChannelNumber(); 
    },
}
</script>
<style>


</style>
<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #ChannelManagement{
        font-size:14px;
        color:#35373b;
        padding-bottom:20px;
    }
    .form-item__key,.form-item_inp{
        flolat:left;
    }
    .CMnav{
        margin-bottom:33px;
    }
    .CMnav li{
         float:left;
         margin-right:14px;
    }
     .rl-card-w{
        width: 48%;
        float:left;
        margin-bottom:20px;
      }
      .mt{
        margin-top:20px;
        padding-bottom:20px;
      }
      .mr{
        margin-right:10px;
        font-size:14px;
        font-weight:500;
      }
    .btn1{
        padding:9px 34px;
    }
    .inpw{
    margin-left:10px;
    width:180px;
    height:34px;
  }
   .el-pagination{
      margin-top:20px;
   }
    
    
</style>